<!--
  ~ Copyright (c) 2020 the original author or authors
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      https://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  ~ or implied. See the License for the specific language governing
  ~ permissions and limitations under the License.
  -->

<h1 mat-dialog-title>{{actionType}} user</h1>
<div mat-dialog-content>
  <form [formGroup]="form">
    <mat-form-field>
      <input matInput placeholder="Email" name="email" formControlName="userEmail"  [matAutocomplete]="auto">
    </mat-form-field>

    <mat-form-field>
      <mat-select formControlName="role">
        <mat-option *ngFor="let role of availableRoles" [value]="role">{{role}}</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions$ | async" [value]="option">{{option}}</mat-option>
    </mat-autocomplete>
  </form>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onCancelClick()">cancel</button>
  <button mat-button color="primary" [disabled]="!form.valid" (click)="onInviteClick()">{{actionType}}</button>
</div>
